
.a-center {
    align-items: center;
}

.j-center{
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}
.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
    
}
.d-r {
    flex-direction: row;
}

.j-end {
    justify-content: flex-end;
}


.wrap {
    flex-wrap: wrap;
}
.top-search-search{
    width:750rpx;
    padding:20rpx 0 25rpx 0;
    .search-input{
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        .inp{
            width: 580rpx;
            font-size:28rpx;
            color:#333;
            margin-right:20rpx;
        }
        .input-icon{
            width: 90rpx;
        }
    }
}

.top-background{
    position:absolute;
    top:0;
    left:0;
    width: 750rpx;
    height: 555rpx;
    background-image: linear-gradient(to bottom right,#B2FACD,#EAFCE1);
    .top-background-bottom{
        position:absolute;
        bottom: 0;
        left:0;
        
        width: 750rpx;
        height: 383rpx;
        background-image: linear-gradient(to top, #F5F5F5, rgba(255,255,255,0));
    }
}

/*主体样式*/
.body-scroll{
	position:fixed;
	width:750rpx;
	.top-piece{
		padding:0rpx 30rpx 0 30rpx;
		.top-piece-cell{
			width: 335rpx;
			height: 140rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 4rpx 20rpx 0 20rpx;
			.piece-cell-title{
				padding-top:24rpx;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.piece-cell-describe{
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			.piece-cell-image{
				width: 116rpx;
				height: 116rpx;
			}
		}
	}
	.top-explain{
		padding: 10rpx 30rpx 0 30rpx;
		.top-explain-content{
			position:relative;
			height: 100rpx;
			.explain-content-background{
				position:absolute;
				top:0;
				left:0;
				height: 100rpx;
				width: 690rpx;
			}
			.explain-content-title{
				padding-left: 38rpx;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #333333;
			}
			.explain-content-text{
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #1DC691;
			}
		}
	}
	.data-piece{
		padding: 10rpx 30rpx 0 30rpx;
		.data-piece-content{
			background: #FFFFFF;
			border-radius: 10rpx;
			.piece-content-title{
				
				.content-title-left{
					border-radius: 10rpx 0 0 0;
					width: 520rpx;
					height: 90rpx;
					padding-left:20rpx;
					.title-left-mark{
						width: 6rpx;
						height: 30rpx;
						border-radius: 3rpx;
					}
					.title-left-title{
						padding-left: 16rpx;
						font-size: 34rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #333333;
					}
					.title-left-text{
						padding-left: 10rpx;
						padding-top:8rpx;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
				.content-title-right{
					padding: 0 30rpx;
					height: 90rpx;
					.title-right-text{
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}
			.piece-content-table{
				padding-top: 10rpx;
				padding-bottom: 20rpx;
				.content-table-row{
					padding: 10rpx 0 10rpx 20rpx;
					.table-row-image{
						width: 220rpx;
						height: 140rpx;
						border-radius: 10rpx;
					}
					.table-row-info{
						padding-left: 10rpx;
                        
						.row-info-title{
							width: 430rpx;
							line-height: 42rpx;
                            overflow:hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            lines:2;
                            .text{
                                font-size: 28rpx;
                                font-weight: 600;
							    color: #333333;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                lines:2;

                            }

						}
						.row-info-data{
                            margin-top:20rpx;
							.info-data-heat{
								margin-right: 26rpx;
								width: 80rpx;
								height: 30rpx;
								//background-image: linear-gradient(to left, #FFCA2A, #F50000);
                                background-color:#1DC691;
								border-radius: 15rpx;
								.data-heat-image{
									width: 16rpx;
									height: 18rpx;
								}
								.data-heat-text{
									padding-left: 4rpx;
									font-size: 20rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 500;
									color: #FFFFFF;
								}
							}
							.info-data-browse{
								padding-left:9rpx;
								font-size: 22rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #666666;
							}
							
						}
					}
				}
			}
		}
		.content-table-cell{
			position:relative;
			display: initial;
			width: 230rpx;
			height: 280rpx;
			border-radius: 10rpx;
			margin-right:20rpx;
			.table-cell-image{
				width: 230rpx;
				height: 280rpx;
				border-radius: 10rpx;
			}
			.table-cell-title{
				position:absolute;
				left:0;
				bottom:0;
				width: 230rpx;
				height: 60rpx;
				background: rgba(0,0,0,0.5);
				border-radius: 0rpx 0rpx 10rpx 10rpx;
				padding: 0 15rpx;
				.cell-title-text{
					width: 200rpx;
					
					text-overflow: ellipsis;//文字超出省略号
					lines:1;//文字行数
					
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}
}
